<template>
  <div id="app">
    <!-- 页头 -->
    <van-sticky>
        <van-nav-bar style="height:55px;">
            <template #left>
                <van-cell  @click="showPopup">
                   <van-icon name="wap-nav" color="#2c3e50" size="2rem" />
                </van-cell>
                <van-popup v-model="show" position="left"  :overlay="true" :style="{ height: '100%',width:'50%' }">
                    <van-collapse v-model="activeNames" accordion>
                        <van-collapse-item title="首页" name="1" size="large" :is-link="false"></van-collapse-item>
                        <van-collapse-item title="粥品展示" name="2">
                          营养粥品
                        </van-collapse-item>
                        <van-collapse-item title="新闻资讯" name="3">
                          粥品动态
                        </van-collapse-item>
                        <van-collapse-item title="粥店加盟" name="4">
                          加盟费用
                        </van-collapse-item>
                        <van-collapse-item title="品牌故事" name="5" :is-link="false"></van-collapse-item>
                        <van-collapse-item title="联系我们" name="6" :is-link="false"></van-collapse-item>
                    </van-collapse>
                </van-popup>
            </template>
            <template #title>
                
                <van-image
                width="102"
                :src="require('./assets/index.img/logo.png')"
                />
            </template>
            <template #right>
                <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" size="2rem" />
            </template>
        </van-nav-bar>              
    </van-sticky>
    
    <!-- 页尾 -->
    <div style="position:fixed;bottom:0;width:100%;">
            <van-row type="flex" justify="space-around"> 
              <!-- 主页按钮 -->
                <van-button color="linear-gradient(to right, #DB481A, #FF6F1F, #FFAF1F )" style="width:187.5px;height:50px;border-radius:15px;">
                    <van-icon name="wap-home" size="30"/>
                    <span class="icon">主页</span> 
                </van-button>
                <!-- 留言咨询按钮 -->
                <van-button color="linear-gradient(to right, #FFAF1F, #FF6F1F, #DB481A)" style="width:187.5px;height:50px;border-radius:15px;">
                    <van-icon name="column" size="30"/>
                    <span class="icon">留言咨询</span> 
                </van-button>
            </van-row>
    </div>
    <router-view/>
  </div>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
.icon{
        vertical-align: 6px;
        font-size:20px;
        margin-left: 5px;
        letter-spacing:5px;
}
</style>
<script>
export default {
  data() {
    return {
      show: false,
    //   activeKey: 0,
    activeName: '1',
      activeNames: ['1'],
    };
  },

  methods: {
    showPopup() {
      this.show = true;
    },
  },
};
</script>